<script setup lang="ts">
import {DICT_TYPE, getDictLabel} from "@/utils/dict";
import ResourceGroupForm from "./ResourceGroupForm.vue";
import {
  ResourceGroupApi,
  ResourceGroupContentTreeVO,
} from "@/api/resource/group";
import GroupDataRadioGroup from "./components/GroupDataRadioGroup.vue";
import ModelContentData from "./components/ModelContentData.vue";
import ImgContentData from "./components/ImgContentData.vue";
import ResourceContentForm from "./ResourceContentForm.vue";
import {ResourceContentApi} from "@/api/resource/content";
import VideoContentData from "@/views/resource/group/components/VideoContentData.vue";
import AudioContentData from "@/views/resource/group/components/AudioContentData.vue";

const message = useMessage()
const { t } = useI18n()

const loading = ref(true) // 列表的加载中
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
})
const queryFormRef = ref() // 搜索的表单

const list = ref<ResourceGroupContentTreeVO[]>([])
const treeList = ref<ResourceGroupContentTreeVO[]>([])

const currentGroup = ref<ResourceGroupContentTreeVO>()

/** 获取列表 */
const getList = async () => {
  loading.value = true

  const data = await ResourceGroupApi.getResourceGroupContentTreeList()
  treeList.value = data

  const newList: ResourceGroupContentTreeVO[] = []
  const convertList = (group: ResourceGroupContentTreeVO) => {
    group.groupChild.forEach((group) => convertList(group))

    // 清空子分组，只保留基本信息和资源内容
    const newGroup: ResourceGroupContentTreeVO = {
      ...group,
      groupChild: [],
    }
    newList.push(newGroup)
  }
  data.forEach((group) => convertList(group))
  list.value = newList

  loading.value = false
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除分组 */
const handleDelete = async () => {
  try {
    await message.delConfirm('删除分组并删除所有包含的资源', currentGroup.value!.name)
    loading.value = true
    await ResourceGroupApi.deleteResourceGroup(currentGroup.value!.id)
    message.success(t('common.delSuccess'))
    await getList()
  }catch {}
  loading.value = false
}

/** 切换分组 */
const handleChangeGroup = (id: number) => {
  currentGroup.value = list.value.find((item) => item.id === id)!
}

/**
 * 资源内容操作
 */
const contentFormRef = ref()
/** 新增/修改资源操作 */
const openContentForm = (type: string, id?: number) => {
  contentFormRef.value.open(type, currentGroup.value, id)
}

/** 获取新资源 */
const handleChangeContent = async () => {
  loading.value = true
  currentGroup.value!.contentChild = await ResourceContentApi.getResourceContentByGroupId(currentGroup.value!.id)
  loading.value = false
}

/** 删除资源 */
const handleDeleteContent = async (id: number) => {
  try {
    await message.delConfirm()
    loading.value = true
    await ResourceContentApi.deleteResourceContent(id)
    message.success(t('common.delSuccess'))
    await handleChangeContent()
  } catch {}
}

onMounted(async () => {
  await getList()
})

</script>

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['pb:organization:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap v-if="treeList.length > 0">
    <el-button
      class="ml-2"
      type="primary"
      :disabled="!currentGroup"
      @click="openContentForm('create')"
      v-hasPermi="['pb:organization:create']"
    >
      添加资源
    </el-button>
    <el-button
      type="primary"
      :disabled="!currentGroup"
      @click="openForm('update', currentGroup?.id)"
      v-hasPermi="['pb:organization:update']"
    >
      修改
    </el-button>
    <el-button
      type="danger"
      :disabled="!currentGroup"
      @click="handleDelete"
      v-hasPermi="['pb:organization:delete']"
    >
      删除
    </el-button>
    <GroupDataRadioGroup :list="treeList" @change="handleChangeGroup" />
    <el-tag v-if="currentGroup" class="m-2" type="primary" size="large">
      {{getDictLabel(DICT_TYPE.RESOURCE_GROUP_TYPE, currentGroup!.type)}}
    </el-tag>
  </ContentWrap>

  <ContentWrap v-loading="loading">
    <el-empty v-if="!currentGroup || currentGroup.contentChild.length === 0" description="暂无数据" />

    <div v-else>
      <ModelContentData
        v-if="currentGroup!.type === 0"
        :list="currentGroup!.contentChild"
        @update="(id: number) => openContentForm('update', id)"
        @delete="handleDeleteContent"
      />
      <ImgContentData
        v-else-if="currentGroup!.type === 1"
        :list="currentGroup!.contentChild"
        @update="(id: number) => openContentForm('update', id)"
        @delete="handleDeleteContent"
      />
      <VideoContentData
        v-else-if="currentGroup!.type === 2"
        :list="currentGroup!.contentChild"
        @update="(id: number) => openContentForm('update', id)"
        @delete="handleDeleteContent"
      />
      <AudioContentData
        v-else-if="currentGroup!.type === 3"
        :list="currentGroup!.contentChild"
        @update="(id: number) => openContentForm('update', id)"
        @delete="handleDeleteContent"
      />
    </div>
  </ContentWrap>

  <ResourceGroupForm ref="formRef" @success="getList" />

  <ResourceContentForm ref="contentFormRef" @success="handleChangeContent" />
</template>

<style scoped lang="scss">

</style>
